{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script>
        var userSocket, queueSocket, sender, interval, queue_id;
        var sec = 0;
        var min = 0;
        var accept_count = 0;
        var is_last_player = false;
        var accepted = false;
        var max_players = {{ max_players|safe }};
        var user_id = {{ user.pk|safe }};
        var themes = [];
    </script>
    <script src="{% static 'js/queue_functions.js' %}"></script>
    <script src="{% static 'js/user_websocket.js' %}"></script>
    <script src="{% static 'js/queue.js' %}"></script>
</head>
<body>
<span class="lobby_invitation_rejected" style="display: none;">Ваше приглашение отклонено</span>
<span class="lobby_invitation_nickname"></span>
<span class="lobby_invitation_accept" style="display: none;">Принять</span>
<span class="lobby_invitation_reject" style="display: none;">Отклонить</span>
<span class="{% if user.is_lobby_leader %}lobby_start_game_button{% else %}lobby_start_game_span{% endif %}">Начать игру</span>
<span id="min"></span>:<span id="sec"></span>
<div class="lobby_users">
    <p>{{ user.nickname }}</p>
    {% if users %}
        {% for u in users %}
            <p id="user_{{ u.pk }}">{{ u.nickname }}</p>
        {% endfor %}
    {% endif %}
</div>
<p>{{ user.current_lobby.pk }}</p>
<select class="lobby_change_mode" {% if not user.is_lobby_leader %}style="display: none;"{% endif %}>
    {% for mode in modes %}
        <option id="mode_{{ mode.0 }}" value="{{ mode.0 }}">{{ mode.1 }}</option>
    {% endfor %}
</select>
<p class="lobby_invite_button">Пригласить друга</p>
<div class="lobby_invite_block">
    {% for friend in friends %}
        <span class="lobby_invite_friend" id="friend_{{ friend.pk }}">{{ friend.nickname }}</span>
    {% endfor %}
</div>
{% if theme %}
<select class="lobby_theme">
    {% for name in themes %}
        <option value='{{ name.0 }}'>{{ name.0 }}</option>
    {% endfor %}
</select>
{% endif %}
</body>
</html>